/*
 * @Author: your name
 * @Date: 2022-01-06 17:57:34
 * @LastEditTime: 2022-04-02 11:07:05
 * @LastEditors: your name
 * @Description: 关于学生或老师的课程列表展示的主要信息页面
 * @FilePath: \web\src\router\class\index.jsx
 */
import React, { useState } from "react";
import "./index.css";
import Header from "../../components/header";
import Cookie from "../../assets/common/cookie";
import { useNavigate, Outlet } from "react-router-dom";
import { ScheduleOutlined, ReadOutlined } from '@ant-design/icons';


const Class = () => {
  const initKey = window.location.pathname.substring(11);
  const [Keys, setKeys] = useState(initKey ? initKey : 'course');
  const navigate = useNavigate();
  const userInfo = Cookie.get("userInfo")
    ? JSON.parse(Cookie.get("userInfo"))
    : "";
  // 跳转路由及选中状态切换
  const clickHandler = key => {
    if(key !== Keys) {
      navigate(key);
      setKeys(key);
    }
    
  }
  return (
    <div className="class" id="class">
      <Header />
      <div className="context">
        <div className="left">
          <div className="header">
            <img
              src="https://tse1-mm.cn.bing.net/th/id/OIP-C.WJkUlxQts6NGm-HnZHllUgAAAA?pid=ImgDet&w=60&h=60&c=7&dpr=1.5"
              alt=""
            />
            <p>{userInfo.username}</p>
          </div>
          <div className={Keys === 'course' ? 'selected':''} onClick={()=>{clickHandler('course')}}><ReadOutlined /> 课程</div>
          <div className={Keys === 'userInfo' ? 'selected':''} onClick={()=>{clickHandler('userInfo')}}><ScheduleOutlined /> 个人信息</div>
        </div>
        <div className="right">
          <Outlet />
        </div>
      </div>
    </div>
  );
};

export default Class;
